<template>
  <div>
    <div style="margin-top: 15px;display: flex">
      <el-input type="text" v-model="keyword" style="width: 20%;margin-left: 300px" placeholder="请输入要搜索的内容" />
      <el-button @click="save" type="primary" style="margin-left: 10px">搜索</el-button>
      <el-input type="text" v-model="keywords" style="width: 20%;margin-left: 10px" placeholder="请输入要获取需要的内容"/>
      <el-button type="primary" @click.native="getBook" style="margin-left: 10px">获取</el-button>
    </div>
    <p style="text-align: center;font-size: small;color: #99a9bf;">该搜索仅限支持英文搜索，给您带来的困扰请谅解</p>

    <el-row>
      <el-col :span="4" v-for="item in forms">
        <el-card :body-style="{ padding: '0px' }"
                 style="margin-left: 6px;height: 298.5px;width: 210px;margin-top: 20px" id="col">
          <a :href="item.img"><img :src="item.img"/></a>
          <p v-html="item.price" style="color: red;font-size: large"></p>
          <div style="padding: -3px;">
            <p style=" display: block;color: #666;height: 14px;font-size: 1px;">
              <a v-html="item.title" style=""></a>
            </p>

            <div class="bottom clearfix">
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import request from '../utils/request'
  import "../assets/index.css";
  export default {
    name: 'Content',
    data() {
      return {
        keywords: '',
        keyword: '',
        forms: []
      }
    },
    created() {

    }, methods: {
      getBook() {
        let keywords = this.keywords
        if (keywords==='')
        {
          this.$message({
            type:'warning',
            message:'请输入内容'
          })
          return
        }
        request.get('/content/parse/' + keywords).then(res => {
          if (res.code === 20000) {
            this.$message({
              type: 'success',
              message: '获取成功'
            })
          }
        }).catch((error => {
          this.$message({
            type: 'success',
            message: '获取成功'
          })
          console.log(error)
        }))

      },
      save() {
        let keyword = this.keyword
        if (keyword==='')
        {
          this.$message({
            type:'warning',
            message:'请输入内容'
          })
          return
        }
        request.get('/content/' + keyword).then(res => {
          console.log(res)
          this.forms = res.data

          console.log(this.forms)
          if (res.code === 20000) {
            this.$message({
              type: 'success',
              message: '查询成功'
            })
          }

        })
      }
    }
  }
</script>

<style>
  #col:hover {
    border: 4px solid red;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>

